<template>
  <el-dialog
    class="nodeImageDialog"
    title="图片"
    v-model="dialogVisible"
    :width="isMobile ? '90%' : '50%'"
    :top="isMobile ? '20px' : '15vh'"
  >
    <div class="title">方式一</div>
    <ImgUpload ref="ImgUpload" v-model="img" style="margin-bottom: 12px" />
    <div class="title">方式二</div>
    <div class="inputBox">
      <span class="label">请输入图片地址</span>
      <el-input v-model="imgUrl" placeholder="http://xxx.com/xx.jpg" @keydown.stop />
    </div>
    <div class="title">可选</div>
    <div class="inputBox">
      <span class="label">请输入图片地址</span>
      <el-input v-model="imgTitle" @keydown.stop />
    </div>
    <template v-slot:footer>
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="confirm">确定</el-button>
    </template>
  </el-dialog>
</template>

<script>
import ImgUpload from "@/components/ImgUpload/index.vue"
import { getImageSize, isMobile } from "simple-mind-map/src/utils/index"

export default {
  name: "NodeImage",
  components: {
    ImgUpload
  },
  data() {
    return {
      dialogVisible: false,
      img: "",
      imgUrl: "",
      imgTitle: "",
      activeNodes: null,
      isMobile: isMobile()
    }
  },
  created() {
    this.$bus.$on("showNodeImage", this.handleShowNodeImage)
    this.$bus.$on("node_active", this.handleNodeActive)
  },
  beforeUnmount() {
    this.$bus.$off("showNodeImage", this.handleShowNodeImage)
    this.$bus.$off("node_active", this.handleNodeActive)
  },
  methods: {
    handleNodeActive(args) {
      if (args) {
        this.activeNodes = [args[0]]
      } else {
        this.activeNodes = []
      }
    },

    handleShowNodeImage() {
      this.reset()
      if (this.activeNodes?.length > 0) {
        const firstNode = this.activeNodes[0]
        const img = firstNode.getData("image") || ""
        if (img) {
          if (/^https?:\/\//.test(img)) {
            this.imgUrl = img
          } else {
            this.img = img
          }
        }
        this.imgTitle = firstNode.getData("imageTitle") || ""
      }
      this.dialogVisible = true
    },

    cancel() {
      this.dialogVisible = false
      this.reset()
    },

    reset() {
      this.img = ""
      this.imgTitle = ""
      this.imgUrl = ""
    },

    async confirm() {
      try {
        // 删除图片
        if (!this.img && !this.imgUrl) {
          this.cancel()
          this.activeNodes.forEach((node) => {
            node.setImage(null)
          })
          return
        }
        let res = null
        let img = ""
        if (this.img) {
          img = this.img
          res = await this.$refs.ImgUpload.getSize()
        } else if (this.imgUrl) {
          img = this.imgUrl
          res = await getImageSize(img)
        }
        this.activeNodes.forEach((node) => {
          node.setImage({
            url: img || "none",
            title: this.imgTitle,
            width: res.width,
            height: res.height
          })
        })
        this.cancel()
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.nodeImageDialog {
  .title {
    font-size: 18px;
    margin-bottom: 12px;
  }

  .inputBox {
    display: flex;
    align-items: center;
    margin-bottom: 10px;

    .label {
      width: 150px;
    }
  }
}
</style>
